<template>
  <div id="addadmin_id">
    <el-dialog
      :title="ruleForm.id == 0 ? '新增用户' : '修改用户'"
      :visible.sync="isShow.sta"
      width="50%"
    >
      <el-form
        :model="ruleForm"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
        style="text-align: left"
        :rules="rules"
      >
        <el-form-item label="账号角色" prop="roleid">
          <el-select v-model="ruleForm.roleid" placeholder="请选择账号角色">
            <el-option
              :label="role.rolename"
              :value="role.id"
              v-for="role in role_list"
              :key="role.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="账号名称" prop="username">
          <el-input v-model="ruleForm.username"></el-input>
        </el-form-item>
        <el-form-item label="账号密码" prop="password">
          <el-input type="password" v-model="ruleForm.password"></el-input>
        </el-form-item>
        <el-form-item label="账号状态" prop="status">
          <el-radio-group v-model="ruleForm.status">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="quxiao">取 消</el-button>
        <el-button type="primary" @click="sumbit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      ruleForm: {
        id: 0,
        roleid: "",
        username: "",
        password: "",
        status: 1,
      },
      rules: {
        username: {
          required: true,
          message: "用户名不可以为空",
          trigger: 'blur',
        },
        roleid: { required: true, message: "用户名不可以为空", trigger: 'blur' },
        password: {
          required: true,
          message: "用户名不可以为空",
          trigger: 'blur',
        },
        status: { required: true, message: "用户名不可以为空", trigger: 'blur' },
      },
    };
  },
  props: ["isShow"],
  created() {
    this.RoleActions();
  },
  methods: {
      quxiao(){
        this.isShow.sta=false
        this.ruleForm={
        id: 0,
        roleid: "",
        username: "",
        password: "",
        status: 1,
      }},
      addxiugai(obj){
       console.log(obj);
       this.ruleForm=obj
      },
    sumbit() {
      let url = "/api/useradd";
      if(this.ruleForm.id!=0){
          url='/api/useredit'
      }
      this.$http.post(url, this.ruleForm).then((res) => {
        if (res.code == 200) {
          this.ruleForm = {
            id: 0,
            roleid: "",
            username: "",
            password: "",
            status: 1,
          };
        //   关闭模态框
          this.isShow.sta=false
        //   子父传参
          this.$emit('emitaddadmin')
        }
      });
    },
    ...mapActions("RoleStore", ["RoleActions"]),
  },
  computed: {
    ...mapState({ role_list: (state) => state.RoleStore.role_list }),
  },
};
</script>

<style>
</style>